<template>
    <div>
        <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
            <el-menu-item index="1" @click="toPage('首页')">首页</el-menu-item>
            <el-submenu index="2">
                <template slot="title">博文管理</template>
                <router-link to="/article-manager">
                    <el-menu-item index="2-1">文章管理</el-menu-item>
                </router-link>
                <router-link to="/articleType">
                    <el-menu-item index="2-2">类型管理</el-menu-item>
                </router-link>
            </el-submenu>
            <el-menu-item index="3" @click="toPage('用户管理')">用户管理</el-menu-item>
            <el-menu-item index="4" @click="toPage('评论管理')">评论管理</el-menu-item>
        </el-menu>
        <el-dropdown @command="handleCommand" split-button type="primary" class="user-styl">
            {{userName}}
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="logout">退出</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
    </div>
</template>
<script>
import { removeToken, getUserName } from "@/utils/auth";
export default {
  name: "layoutHeader",
  data() {
    return {
      activeIndex: "",
      activeIndex2: "",
      userName: ""
    };
  },
  mounted() {
    this.userName = getUserName();
  },
  methods: {
    handleSelect(key, keyPath) {
      //   console.log(key, keyPath);
    },
    handleCommand(command) {
      if (command === "logout") {
        removeToken();
        this.$router.push("/");
      }
    },
    toPage(item) {
      if (item === "首页") {
        this.$router.push("/home");
      } else if (item === "用户管理") {
        this.$router.push('/user')
      } else if (item === "评论管理") {
        this.$router.push('/discuss')
      }
    }
  }
};
</script>
<style>
.user-styl {
  position: relative;
  left: 92%;
  top: -50px;
}
</style>
